<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        ul {
            list-style: none; /* 去除标签默认的项目符号 */
        }

        /* 清除标签默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 版面设置 */
        div {
            width: 1200px; /* 宽高 */
            height: 400px;
            margin: 50px auto; /* 版心居中 */
            border: 1px solid red; /* 边框线 */
            overflow: hidden; /* 溢出:隐藏 */
        }

        /* 版面里 图片设置 */
        div li {
            width: 240px; /* 宽高. JS实现画面切换,会修改这个宽度*/
            height: 400px;
            float: left; /* 浮动布局 */
            transition: all 500ms; /* 过渡属性, 渐变效果 */
        }

        div ul {
            width: 1200px;
        }
    </style>
</head>
<body>

<div id="box">
    <ul>
        <li>
            <a href="#">
                <img src="../素材/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../素材/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../素材/3.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../素材/4.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../素材/5.jpg" alt="">
            </a>
        </li>
    </ul>
</div>

<script>
    //获取DOM元素
    const 数组_li图片 = document.querySelectorAll('div ul li')
    // 循环注册 监控事件
    for (let i = 0; i < 数组_li图片.length; i++) {
        // 监控 鼠标经过事件
        数组_li图片[i].addEventListener('mouseenter', function () {
            // 检查到鼠标经过, 修改图片的 宽度
            for (let j = 0; j < 数组_li图片.length; j++) {
                数组_li图片[j].style.width = '100px' // 统一修改图片的 宽度 都是100px
            }
            数组_li图片[i].style.width = '800px' // 单独修改, 鼠标停放在的图片 宽度
        })

        // 监控 鼠标离开事件
        数组_li图片[i].addEventListener('mouseleave', function () {
            // 循环方式 修改全部的li标签的图片 宽度
            for (let j = 0; j < 数组_li图片.length; j++) {
                数组_li图片[j].style.width = '240px' // 统一在修改图片宽度 240px
            }
        })
    }
</script>
</body>
</html>